<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibiliGoods 2233 ACE.BUNNY 系列 手机壳 - 会员购</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/product-common.js"></script>
    <link href="css/product-common.css" rel="stylesheet">
    <link href="css/productdetail.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
</head>
<body>
    <div id="app">
        <!-- 导航栏 -->
        <product @logined="logined"></product>

        <div class="container">
            <!-- 商品详情区域 -->
            <div class="product-detail">
                <!-- 商品图片区域 -->
                <div class="product-images">
                    <div class="main-image">
                        <img   ref="mainImage" id="mainImage">
                    </div>
                    <div class="thumbnail-list">
                        <div class="thumbnail" v-for="p in product.pictureItems" @click="changeImage(p.picture)">
                            <img :src="p.picture"  style="width:100%;height:100%;object-fit:cover;">
                        </div>
                    </div>
                </div>

                <!-- 商品信息区域 -->
                <div class="product-info">
                    <h1 class="product-title">{{product.name}}</h1>

<!--                    <div class="product-meta">-->
<!--                        <span class="badge">IP</span>-->
<!--                        <span class="badge">商用游戏</span>-->
<!--                        <span class="badge">应用</span>-->
<!--                        <span class="badge">BULIBILIGOODS</span>-->
<!--                    </div>-->

                    <div class="product-price">¥{{product.price}}</div>

                    <div class="product-meta">
                        <span class="badge highlight">正品保障</span>
                        <span class="badge highlight">专业包装</span>
                        <span class="badge highlight">质130包邮</span>
                        <span class="badge highlight">支持7天无理由</span>
                        <span class="badge highlight">48种发货</span>
                    </div>

                    <div class="spec-section">

                        <div class="spec-content">
                            <p><strong>ip：</strong>{{product.ip}}</p>
                            <p><strong>品牌：</strong>{{product.label}}</p>
                        </div>
                    </div>

                    <div class="buy-actions">
                        <button class="btn btn-primary" @click="ordermessage">立即购买</button>
                    </div>

                    <div class="brand-section">
                        <div class="brand-title">商品详情</div>
                        <div class="spec-content">
                            <div style="display: flex" v-for="d in details">
                                <label>{{d.split(":")[0] + ":"}}</label>
                                <p>{{"&nbsp;" + d.split(":")[1]}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品详情展示区域 -->
            <div class="product-description">
                <div class="description-title">商品详图</div>
                <div class="description-content">
<!--                    <p>这里是商品的详细描述内容，可以包含更多关于商品的详细信息、使用说明、注意事项等。</p>-->

                    <div class="description-image" v-for="p in product.imageItems">
                        <img :src="p.image" alt="商品详情">
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script>


    </script>
</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            product:{},
            details:{},
            myinfo:{},
        },
        created() {
            this.getProductById();
        },
        methods : {
            logined(myinfo){
                this.myinfo = myinfo;
            },
            getProductById() {
                axios.get("b-shopping/product/getProductById"+location.search).then(res=> {
                    if(res.data.code == 1){
                        this.product = res.data.data
                        this.$refs.mainImage.src = this.product.pictureItems[0].picture;
                        this.details = this.product.detail.split(";");
                    }
                })
            },
            // 切换商品主图
            changeImage(src) {
                document.getElementById('mainImage').src = src;

                // 更新缩略图激活状态
                const thumbnails = document.querySelectorAll('.thumbnail');
                thumbnails.forEach(thumb => {
                    thumb.classList.remove('active');
                });
                event.currentTarget.classList.add('active');
            },
            ordermessage(){
                if(this.myinfo.id){
                    location.href = 'ordermessage.html?id=' + this.product.id
                }else{
                    this.$alert("请先登录");
                }
            }
        }
    })
</script>
</html>